<template>
  <view>
    <z-paging ref="pagingRef" v-model="dataList" :auto="false" @query="queryList">
      <template #top>
        <view>
          <mt-navbar title="dsfds">
            <template #center>
              <view class="flex items-center">
                <text class="text-32rpx text-#1C213E font-bold">消息（99）</text>
                <image class="w-48rpx h-48rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-clear.svg"></image>
              </view>
            </template>
          </mt-navbar>
          <view class="drop-box h-44px">
            <uv-tabs
              v-if="showTabs"
              :list="tabList"
              :current="currentTab"
              :active-style="{ color: '#1484EE', fontWeight: 'bold' }"
              :inactive-style="{ color: '#727687' }"
              line-width="32"
              line-color="#1484EE"
              @click="tabsChange"
            ></uv-tabs>
          </view>
        </view>
      </template>
      <view class="px-32rpx pt-32rpx">
        <view v-for="(item, index) in dataList" :key="index" class="mb-16rpx bg-#ffffff rd-8rpx p-32rpx">
          <view class="flex items-center mb-32rpx">
            <view class="flex items-center flex-1 min-w-0">
              <image
                class="w-48rpx h-48rpx mr-16rpx"
                src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-notice-type1.svg"
              ></image>
              <view class="flex-1 min-w-0 text-32rpx text-#1C213E font-bold break-all">第三方都是</view>
            </view>
            <text class="text-28rpx text-#666666 ml-20rpx">2025-02-03 12:56</text>
          </view>
          <view class="text-28rpx text-#727687 break-all">第三方都是第三方都是第三方都是第三方都是</view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script setup>
import { providerNoticegetNoticeUnreadCount } from '@/api/common';

const tabList = ref([
  {
    name: '全部',
    type: null,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#1484EE'
    }
  },
  {
    name: '待分配',
    type: 0,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#727687'
    }
  },
  {
    name: '处理中',
    type: 1,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#727687'
    }
  },
  {
    name: '待返佣',
    type: 2,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#727687'
    }
  },
  {
    name: '已完成',
    type: 3,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#727687'
    }
  },
  {
    name: '拒绝接单',
    type: 4,
    badge: {
      value: 0,
      bgColor: 'transparent',
      color: '#727687'
    }
  }
]);
// 当前选中的 tab 索引
const currentTab = ref(0);
// 切换 tab 状态
function tabsChange(e) {
  currentTab.value = e.index;
  for (let item of tabList.value) {
    item.badge.color = '#727687';
  }

  tabList.value[e.index].badge.color = '#1484EE';
  pagingRef.value.reload();
}

const showTabs = ref(false);
function getNum() {
  // showTabs.value = false;
  // providerNoticegetNoticeUnreadCount().then((res) => {
  //   for (const item of tabList.value) {
  //     if (item.type === null) {
  //       item.badge.value = res.data[-1];
  //     } else {
  //       item.badge.value = res.data[item.type];
  //     }
  //   }
  //   setTimeout(() => {
  //     showTabs.value = true;
  //   }, 100);
  // });
  showTabs.value = true;
}

// 分页 ref
const pagingRef = ref(null);
const dataList = ref([]);
const lastId = ref('');

// 请求列表数据
async function queryList(pageNum, pageSize) {
  try {
    const params = {
      pageNum: pageNum,
      pageSize: pageSize,
      lastId: pageNum === 1 ? '' : lastId.value,
      clueStatus: tabList.value[currentTab.value].type
    };
    // const res = await cluegetCluePage(params);
    // const list = res.data.items;
    const list = [{}, {}];

    lastId.value = list[list.length - 1]?.id;

    pagingRef.value.complete(list);
  } catch (e) {
    pagingRef.value.complete(false);
  }
}

onShow(() => {
  dataList.value = [];
  getNum();
  nextTick(() => {
    pagingRef.value.refresh();
  });
});
</script>

<style lang="scss" scoped>
.drop-box {
  background-color: #ffffff;
  box-shadow: 0 31rpx 62rpx -15rpx rgba(0, 0, 0, 0.1);
}
</style>
